<template>
  <div>
    <el-drawer
      :with-header="false"
      size="75%"
      v-bind="$attrs"
      v-on="$listeners"
      @open="onOpen"
      @close="onClose"
    >
      <div style="padding: 24px 24px 30px 24px">
        <el-descriptions style="margin-bottom: 12px" direction="vertical" :column="5" size="medium">
          <template slot="title">
            <div style="line-height: 30px;display: inline-block;height: 30px;">{{ data.leadsName }}</div>
          </template>
          <template slot="extra">
            <el-button type="primary" size="small">
              <i class="el-icon-sort"/> 转移
            </el-button>
            <el-button type="warning" size="small" @click="updateHandler(data.id)">
              <i class="el-icon-edit"/> 编辑
            </el-button>
            <el-button type="danger" size="small" @click="deleteHandler(data.id)">
              <i class="el-icon-delete"/> 移除
            </el-button>
            <el-dropdown style="margin-left: 12px">
              <el-button size="small">
                <i class="el-icon-more"/>
              </el-button>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item @click.native="transferHandler">
                  <i class="el-icon-user"> 转换为客户</i>
                </el-dropdown-item>
                <el-dropdown-item @click.native="receiveHandler">
                  <i class="el-icon-sell"> 领取</i>
                </el-dropdown-item>
                <el-dropdown-item @click.native="returnHandler">
                  <i class="el-icon-sold-out"> 退回</i>
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </template>
          <el-descriptions-item label="姓名">{{ data.leadsName }}</el-descriptions-item>
          <el-descriptions-item label="线索来源">
            <dict-tag :options="dict.type.crm_source_name" :value="data.sourceId"/>
          </el-descriptions-item>
          <el-descriptions-item label="手机">{{ data.mobile }}</el-descriptions-item>
          <el-descriptions-item label="负责人">{{ data.ownerUserName }}</el-descriptions-item>
          <el-descriptions-item label="创建时间">{{ data.createTime }}</el-descriptions-item>
        </el-descriptions>
        <el-tabs v-model="activeName" @tab-click="tabClick">
<!--          <el-tab-pane label="活动" name="activity">-->
<!--            <comment></comment>-->
<!--          </el-tab-pane>-->
          <el-tab-pane label="详细资料" name="detailInfo">
            <el-descriptions title="基本信息" :column="2">
              <el-descriptions-item label="线索名称">{{ data.leadsName }}</el-descriptions-item>
              <el-descriptions-item label="邮箱">{{ data.email }}</el-descriptions-item>
              <el-descriptions-item label="线索来源">
                <dict-tag :options="dict.type.crm_source_name" :value="data.sourceId"/>
              </el-descriptions-item>
              <el-descriptions-item label="手机">{{ data.mobile }}</el-descriptions-item>
              <el-descriptions-item label="电话">{{ data.telephone }}</el-descriptions-item>
              <el-descriptions-item label="下次联系时间">{{ data.nextTime }}</el-descriptions-item>
              <el-descriptions-item label="客户行业">
                <dict-tag :options="dict.type.crm_customer_industry" :value="data.industryId"/>
              </el-descriptions-item>
              <el-descriptions-item label="客户级别">
                <dict-tag :options="dict.type.crm_customer_level" :value="data.levelId"/>
              </el-descriptions-item>
              <el-descriptions-item label="地址">{{ data.address }}</el-descriptions-item>
              <el-descriptions-item label="备注">{{ data.remark }}</el-descriptions-item>
            </el-descriptions>
            <el-descriptions title="系统信息" :column="2" style="margin-top: 20px">
              <el-descriptions-item label="负责人">{{ data.ownerUserName }}</el-descriptions-item>
              <el-descriptions-item label="创建人">{{ data.createUserName }}</el-descriptions-item>
              <el-descriptions-item label="创建时间">{{ data.createTime }}</el-descriptions-item>
              <el-descriptions-item label="更新时间">{{ data.updateTime }}</el-descriptions-item>
              <el-descriptions-item label="最后跟进时间">{{ data.lastTime }}</el-descriptions-item>
            </el-descriptions>
          </el-tab-pane>
          <el-tab-pane label="附件" name="file">
            <file-drawer-table :file-list="drawerTableData" :loading="drawerTableLoading" v-if="activeName == 'file'"/>
          </el-tab-pane>
          <el-tab-pane label="操作记录" name="records">
            <crm-records :activity-list="drawerTableData"/>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-drawer>
    <!-- 对话框 -->
    <leads-dialog :visible.sync="dialogVisible" :pk="pk"/>
  </div>
</template>

<script>
import { deleteBatchByIds, selectByPrimaryKey, transfer } from '@/api/crm/Leads'

import { listActionRecord } from '@/api/crm/ActionRecord'

import Comment from '@/components/CrmEdit/Index'
import LeadsDialog from './Create'
import FileDrawerTable from '@/components/Crm/File/DrawerTable'
import CrmRecords from '@/components/CrmRecords/Index'

export default {
  inheritAttrs: false,
  name: 'LeadsDrawer',
  components: {
    LeadsDialog,
    Comment,
    CrmRecords,
    FileDrawerTable
  },
  dicts: ['crm_source_name', 'crm_customer_industry', 'crm_customer_level'],
  props: {
    pk: {
      type: Number,
      default: null
    }
  },
  data() {
    return {
      dialogVisible: false, // 对话框懒加载
      drawerTableData: [], // 表格数据
      drawerTableLoading: false, // 表格加载状态
      activeName: 'detailInfo', // 标签页标志
      data: {
        leadsName: ''
      } // 对象数据
    }
  },
  // 在实例创建完成后被立即调用
  created() {

  },
  // 实例被挂在后调用
  mounted() {

  },
  // 方法
  methods: {
    // 抽屉打开方法
    onOpen() {
      if (this.pk != null) {
        selectByPrimaryKey(this.pk).then(res => {
          this.data = res.data
        })
      }
    },
    // 抽屉关闭回调
    onClose() {
      this.activeName = 'detailInfo'
      this.data = {
        leadsName: ''
      }
      this.$emit('update:visible', false)
    },
    // 编辑按钮点击事件
    updateHandler(id) {
      this.dialogVisible = true
    },
    // 删除按钮点击事件
    deleteHandler(id) {
      this.$modal.confirm('是否确认移除当前线索').then(() => {
        return deleteBatchByIds(id)
      }).then(() => {
        this.$emit('ok')
        this.onClose()
        this.$modal.msgSuccess('移除成功')
      }).catch(() => {
      })
    },
    // 领取线索
    receiveHandler() {
      console.log('领取线索')
    },
    // 退回线索
    returnHandler() {
      console.log('退回线索')
    },
    // 线索转化为客户
    transferHandler() {
      this.$modal.confirm('是否将当前线索转为客户').then(() => {
        transfer(this.data.id)
          .then(() => {
            this.$emit('update:visible', false)
            this.$emit('ok')
            this.$modal.msgSuccess('转客户成功')
          }).catch(() => {
        })
      })
    },
    // 标签页切换
    tabClick({ name }) {
      // 重置数据
      this.drawerTableLoading = true
      this.drawerTableData = []
      if (name == 'file') {
        // 查询附件列表
        setTimeout(() => {
          this.drawerTableLoading = false
        }, 500)
      } else if (name == 'records') {
        listActionRecord(1, this.data.id).then(res => {
          this.drawerTableData = res.data
          console.log('返回的记录', this.drawerTableData)
        })
      }
    }
  }
}
</script>

<style>
.el-descriptions__title {
  font-size: 20px;
  font-weight: bold;
}

.el-descriptions-item__container {
  font-size: 16px !important;
}

.el-drawer__header {
  margin-bottom: 0px !important;
}
</style>
